魅族手机无法打开 inspect 界面解决思路

发表于 | 阅读次数:

  1. 判断是不是没翻墙问题，验证发现已开启翻墙，仍然无法正常打开；

  2. Windows 和 Mac 确认是否都无法正常打开，验证后发现确实都不可以；

  3. 尝试其他方式，类似于抓包，如 spy-debugger、eruda 等，其中验证发现 spy-debugger 不能直接访问到 app 中的远程代码，所以使用了 eruda 库，直接嵌入到开发以及测试环境的代码中，可以直接打开 app webview 界面查看控制台报错；

  4. 在控制台发现抛出了好几个错误：

getBoundingClientRect 获取到的对象，如 width、height、x 等，发现是无法对他们进行赋值处理的，不存在 set 方法，只有 get 方法。错误如下：Cannot read property width of [object, object] which has only a getter。 所以为了处理这一兼容问题，做了如下操作，从而在魅族这一报错就得到了解决。 

1
2
3
4
5
6
7
8
9
10
11
12
let flyoutArea = {}; 
const flyoutRect = flyout_.svgGroup_.getBoundingClientRect(); 
flyoutArea = { 
​	x: flyoutRect.x, 
​	y: flyoutRect.y, 
​	top: flyoutRect.top, 
​	right: flyoutRect.right, 
​	bottom: flyoutRect.bottom, 
​	left: flyoutRect.left, 
​	width: flyoutRect.width, 
​	height: flyoutRect.height 
};

S90311-154941

控制台抛出的错误

S90311-103120

获取到的 Rect，不存在 set 方法

解决完上述报错后，发现项目打开还是存在问题，加载扩展出问题了，eruda 并没有显示错误函数，只抛出了 Unexpected token function 这一句错误，没思路了，直接 google 一下寻求思路，大部分抛出该问题还是因为存在异步操作问题，那觉得应该是代码中存在着 es6+ 语法导致不兼容，但是无法查看具体是哪一块出问题了，最后直接看看魅族自带的浏览器版本，发现是 chrome 44.0.2403.146 版本，搜一下该版本，只找到windows安装包，在虚拟机跑一下该版本，首先验证了 1）确实是存在获取到的 DOMRect无法赋值的情况，同样没有 set 方法，然后用该版本终于打开了 inspect 界面，可以看到所有的控制台信息，定位到了错误，原因是在添加扩展的时候，没有对扩展中的代码进行转码处理，导致兼容性问题。

图片